{% extends "base.html" %}
{% load dict_extras %}

{% block meta %}
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />   
    <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/js/jquery-ui-1.8.17.custom.min.js"></script>
    <script type="text/javascript" src="/js/ui/i18n/jquery.ui.datepicker-ru.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#datepicker').datepicker({inline: true });
            $('#dialog_link, ul#icons li').hover(
                function() { $(this).addClass('ui-state-hover'); }, 
                function() { $(this).removeClass('ui-state-hover'); }
            );
            
        });
    </script>
    <!--style type="text/css">
        /*demo page css*/
        body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
        .demoHeaders { margin-top: 2em; }
        #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
        #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
        ul#icons {margin: 0; padding: 0;}
        ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
        ul#icons span.ui-icon {float: left; margin: 0 4px;}
    </style-->    
    <script> 
    </script> 
{% endblock %}
{% block content %}
    {% for year, year_data in report.items %}
    <h3>Производство с начала {{year}}г.</h3>
    <table width=600 class="data">
        <tr>
            <th>Цех</th>
            {% for month_num, month_name in MONTHS %}
                <th>{{ month_name }}</th>
            {% endfor %}
        </tr>

        {% for prod_position, row in year_data.items %}
            <tr style="background: {% cycle 'lightyellow' 'lightcyan' 'lightgreen' 'lightpink'%}">
                <td>{% dict_key PROD_POSITIONS_DICT prod_position %}</td>
                {% for month_no, value in row.items %}
                    <td>{{ value }}</td>
                {% endfor %}
            </tr>
        {% endfor %}
    </table>
    {% endfor %}
{% endblock %}
